import React from 'react';
import { Toast, } from 'antd-mobile';
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";
import wx from 'weixin-js-sdk';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
			type: 1,  //1--我的购买  2--我的收藏
            data: [],
			hasMore: true,
			data:[],
			action: STATS.init,
			page: 1,
		}
    }
	componentDidMount(){
		document.title = '我的学习'
				this.getList()
				global.Ajax.hhtc_request("user/get_qrcode",{}).then(data=>{
					console.log('第一步 ', data);
		if(data.code===1){
			this.setState(data.data)
					}
			});
			
			global.Ajax.hhtc_request("web/get_share",{windowurl:window.location.href}).then(data=>{
					console.log('分享页面的数据 ', data);
					if (data.code === 1) {
							wx.config({
									debug : false,
									appId : data.data.appId,
									timestamp : data.data.timestamp,
									nonceStr : data.data.noncestr,
									signature : data.data.signature,
									jsApiList : [
											// 所有要调用的 API 都要加到这个列表中
											"updateTimelineShareData", //分享给好友
											"updateAppMessageShareData", //分享到朋友圈
									]
							})
							
							wx.checkJsApi({
									jsApiList: ['updateTimelineShareData','updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
									success: function(res) {
											console.log('checkJsApi--',res)
											// 以键值对的形式返回，可用的api值true，不可用为false
											// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
									}
							});
							wx.error(function(res){
									console.log(res)
									// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
							});
							
							wx.ready(()=>{
									//配置好需要分享的几个配置，这里只是演示，实际开发中应该是动态的变量
									var shareData = {
											title: '好友邀请你加入艺看学院',
											desc: '你的好友正在邀请你加入艺看学院，快来看看吧',
											link: window.location.href.split('#')[0],
											imgUrl: 'https://yksy.qianjitianxia.com/o_1eiao12gcfa6122j1eicun0pjl8.png',//传递给微信需传递完整的带url链接
											success:function() {
													global.Ajax.hhtc_request("user/share",{}).then(data=>{
															console.log('data: ', data);
															// return Toast.success(data.msg);
													})
											}
									};

									//调用各个接口并传入配置变量
									wx.updateTimelineShareData(shareData);
									wx.updateAppMessageShareData(shareData);
							});
					}
			});
	
	
	


    }
	changeType(type){
		this.setState({
			type,
			data: []
		},()=>{
			this.getList()
		})
	}
	getList(){
		var req={
            page: 1,
			size: 12,
		}
		var url;
		if(this.state.type===1){
			url='learn/pay_list'
		}else{
			url='learn/sc_list'
		}
        global.Ajax.hhtc_request(url,req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    page: this.state.page,
                });
            }
		})
	}
	// 获取商品
	handleAction = action => {
		console.info(action, this.state.action, action === this.state.action);
		//new action must do not equel to old action
		if (action === this.state.action) {
		  	return false;
		}
		if (action === STATS.refreshing) {
		  	//刷新
		  	this.handRefreshing();
		} else if (action === STATS.loading) {
		  	//加载更多
		  	this.handLoadMore();
		} else {
		  	//DO NOT modify below code
		  	this.setState({
				action: action
		  	});
		}
	};	
	handRefreshing = () => {
		if (STATS.refreshing === this.state.action) {
		  	return false;
		}
        var req={
            page: 1,
			size: 12,
			name: this.state.name,
        }
		var url;
		if(this.state.type===1){
			url='learn/pay_list'
		}else{
			url='learn/sc_list'
		}
        global.Ajax.hhtc_request(url,req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    action: STATS.refreshed,
                    page: this.state.page,
                });
            }
		})
		this.setState({
		  	action: STATS.refreshing
		});
	};
	handLoadMore = () => {
		if (STATS.loading === this.state.action) {
		  	return false;
		}
		//无更多内容则不执行后面逻辑
		if (!this.state.hasMore) {
		  	return;
        }
        var req={
            page: this.state.page,
			size: 12,
			name: this.state.name,
        }
		var url;
		if(this.state.type===1){
			url='learn/pay_list'
		}else{
			url='learn/sc_list'
		}
        global.Ajax.hhtc_request(url,req).then(data=>{
			if(data.code===1){
                if(data.data.length>0){
					this.setState({
                        data: this.state.data.concat(data.data.data),
                        action: STATS.reset,
                    });
				}else{
					this.setState({
                        action: STATS.reset,
                        hasMore: false
                    });
				}
            }
		})
		this.setState({
		  	action: STATS.loading
		});
	};
	render(){
		return(
			<div className=''>
                <div className='learn_tab'>
					<p className={this.state.type===1?'active':''} onClick={this.changeType.bind(this,1)}>我的购买</p>
					<p className={this.state.type===2?'active':''} onClick={this.changeType.bind(this,2)}>我的收藏</p>
				</div>
				<ReactPullLoad
					downEnough={100}
					action={this.state.action}
					handleAction={this.handleAction}
					hasMore={this.state.hasMore}
					distanceBottom={100}
				>
					<div className='index_lj_list'>
						{this.state.data.map((item,index)=>{
							return(
								<div key={'list'+index} className='item' onClick={()=>{this.props.history.push('/page/home/learn/learndetail/'+item.id)}}>
									<div className='picbox'>
										<img alt='' src={item.img} className='pic' />
										<p className='bq1'>{item.type===1?'视频':'听书'}</p>
									</div>
									<div className='right'>
										<p className='title'>{item.title}</p>
										<p className='desc'>{item.info}</p>
										<p className='peop'>{item.author}</p>
										<div className='flex'>
											{this.state.type===1?<p className='pri' style={{fontSize: 14,}}>已学习{item.learned}%</p>:<React.Fragment>
												<p className='pri'>{item.z_price*1000/1000}</p>
												{item.is_jiang===1&&<p className='bq'>分享有奖</p>}
											</React.Fragment>}
											<p className='play_btn'>
												<img alt='' src={require('../../imgs/sanj.png')} className='sanj' />
												{this.state.type===1&&<span>学习</span>}
												{(this.state.type===2&&item.is_pay==1)&&<span>学习</span>}
												{(this.state.type===2&&item.is_pay==0)&&<span>试学</span>}
											</p>
										</div>
									</div>
								</div>
							)
						})}
					</div>
				</ReactPullLoad>
				{/* <div className='index_lj_list'>
					<div className='item' onClick={()=>{this.props.history.push('/page/home/learn/learndetail/id')}}>
						<div className='picbox'>
							<img alt='' src={require('../../imgs/pic1.png')} className='pic' />
							<p className='bq1'>视频</p>
						</div>
						<div className='right'>
							<p className='title'>郑凯丨大戏永不落幕，喜剧谁主沉浮</p>
							<p className='desc'>幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三</p>
							<p className='peop'>唐玉</p>
							<div className='flex'>
								{this.state.type===1?<p className='pri' style={{fontSize: 14,}}>已学习100%</p>:<React.Fragment>
									<p className='pri'>￥13.98</p>
									<p className='bq'>分享有奖</p>
								</React.Fragment>}
								<p className='play_btn'>
									<img alt='' src={require('../../imgs/sanj.png')} className='sanj' />
									{this.state.type===1?<span>学习</span>:<span>试学</span>}
								</p>
							</div>
						</div>
					</div>
				</div> */}
			</div>
		)
	}
}
